<template>
    <div class="i-table-no-border">
        <span v-if="!SHow" style="margin-left: 45%">暂无权限</span>
        <Tabs :value="value" v-if="SHow" ref="tabs"  @on-click="swichta" >
            <TabPane label="客服" v-if="isShow"  name="1">
                <Row :gutter="24" type="flex" class="ivu-mb-16">
                <Col span="4">
                    <DatePicker type="daterange" v-width="'100%'" v-model="dataTime" placeholder="到诊日期选择" @on-change="handleChangeData"/>
                </Col>
                <Col span="4">
                    <Input search clearable v-model="keywords" @on-enter="handleChangeWord" @on-clear="handleChangeWord" placeholder="请输入患者姓名/手机号/诊疗号"/>
                </Col>
                <Col span="4">
                    <Select v-model="source_channel_id"  :transfer="true" placeholder="渠道" @on-change="handleChangeSource" clearable>
                        <Option v-for="item in basicData.source_channel_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">{{ item.name }}</Option>
                    </Select>
                </Col>
                <Col span="4">
                    <Select v-model="clinic_id" placeholder="门诊" @on-change="handleChangeClinic" clearable>
                        <Option v-for="item in basicData.clinic_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">{{ item.name }}</Option>
                    </Select>
                </Col>
                <Col span="4">
                    <Select v-model="outpatient_type_id" :transfer="true" placeholder="就诊类型" @on-change="handleChangeOutPatient" clearable>
                        <Option v-for="item in basicData.outpatient_type_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">{{ item.name }}</Option>
                    </Select>
                </Col>
                <Col span="4">
                    <Select v-model="patient_diseases_id" :transfer="true" placeholder="病种" @on-change="handleChangeOutPatients" clearable>
                        <Option v-for="item in patient_diseases_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">{{ item.name }}</Option>
                    </Select>
                </Col>
                <Col span="4">
                    <Button type="primary" @click="sumber" :disabled="disabled"> 分配</Button>
                </Col>
            </Row>
                <Table size="small" ref="table" :columns="columns" :loading="loading" @on-selection-change="selectionChange" :data="data" @on-sort-change="handleChangeSort">
                    <template slot-scope="{ row }" slot="info">
                        <a href="javaScript:;"  @click="handleDetailPatient(row)">{{ row.name }} , {{ row.age }} , {{ row.gender_str }}</a>
                    </template>
                    <template slot-scope="{ row }" slot="diagnosis">
                        <Tag class="blueStatus" v-if="row.outpatient_name" color="blue">{{ row.outpatient_name }}</Tag>
                    </template>
                    <template slot-scope="{ row }" slot="channel">
                        <Badge status="success" :text="row.source_name" />
                    </template>
                    <template slot-scope="{ row }" slot="patient_card_id">
                <span v-if="row.patient_card_id">
                    <span v-if="row.patient_card_id.length < 15">
                        {{row.patient_card_id}}
                    </span>
                    <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200" :content="row.patient_card_id">
                        {{row.patient_card_id.substring(0, 15)}}…
                    </Poptip>
                </span>
                        <span v-else>无</span>
                    </template>
                </Table>
                <div class="ivu-mt ivu-text-center">
                    <Page
                            :total="page.total"
                            :current.sync="page.page"
                            show-total
                            show-elevator
                            :page-size="page.pageSize"
                            @on-change="handleChangePage"
                            :page-size-opts="pageOpts"
                            show-sizer transfer
                            @on-page-size-change="handleChangePageSize"
                    />
                </div>
                <Modal v-model="createModal" :mask-closable= "false" title="分配患者" @on-ok="handleSubmit" :loading="creating">
                    <Form :model="createData" :rules="createRules" ref="create">
                        <FormItem label="归属人" >
                            <Select v-model="createData.belong_member_id" multiple filterable @on-change="choose">
                                <Option
                                        v-for="item in member_customer_list"
                                        :value="item.id"
                                        :key="item.id"
                                >{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Form>
                </Modal>
            </TabPane>
            <TabPane label="医助" v-if="isShows" name="2">
                    <Row :gutter="24" type="flex" class="ivu-mb-16">
                        <Col span="4">
                            <DatePicker type="daterange" v-width="'100%'" v-model="dataTime" placeholder="到诊日期选择" @on-change="handleChangeData"/>
                        </Col>
                        <Col span="4">
                            <Input search clearable v-model="keywords" @on-enter="handleChangeWord" @on-clear="handleChangeWord" placeholder="请输入患者姓名/手机号/诊疗号"/>
                        </Col>
                        <Col span="4">
                            <Select style="z-index: 2" v-model="source_channel_id" placeholder="渠道" :transfer="true" @on-change="handleChangeSource" clearable>
                                <Option v-for="item in basicData.source_channel_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">{{ item.name }}</Option>
                            </Select>
                        </Col>
                        <Col span="4">
                            <Select style="z-index: 2" v-model="clinic_id" placeholder="门诊" @on-change="handleChangeClinic" clearable>
                                <Option v-for="item in basicData.clinic_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">{{ item.name }}</Option>
                            </Select>
                        </Col>
                        <Col span="4">
                            <Select style="z-index: 2" v-model="outpatient_type_id" :transfer="true" placeholder="就诊类型" @on-change="handleChangeOutPatient" clearable>
                                <Option v-for="item in basicData.outpatient_type_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">{{ item.name }}</Option>
                            </Select>
                        </Col>
                        <Col span="4">
                            <Select v-model="patient_diseases_id" :transfer="true" placeholder="病种" @on-change="handleChangeOutPatients" clearable>
                                <Option v-for="item in patient_diseases_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">{{ item.name }}</Option>
                            </Select>
                        </Col>
                        <Col span="4">
                            <Button type="primary" @click="sumbers" :disabled="disabled"> 分配</Button>
                        </Col>
                    </Row>
                    <Table size="small" ref="table" :columns="columns" :loading="loading" @on-selection-change="selectionChange" :data="data" @on-sort-change="handleChangeSort">
                        <template slot-scope="{ row }" slot="info">
                            <a href="javaScript:;"  @click="handleDetailPatient(row)">{{ row.name }} , {{ row.age }} , {{ row.gender_str }}</a>
                        </template>
                        <template slot-scope="{ row }" slot="diagnosis">
                            <Tag class="blueStatus" v-if="row.outpatient_name" color="blue">{{ row.outpatient_name }}</Tag>
                        </template>
                        <template slot-scope="{ row }" slot="channel">
                            <Badge status="success" :text="row.source_name" />
                        </template>
                        <template slot-scope="{ row }" slot="patient_card_id">
                <span v-if="row.patient_card_id">
                    <span v-if="row.patient_card_id.length < 15">
                        {{row.patient_card_id}}
                    </span>
                    <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200" :content="row.patient_card_id">
                        {{row.patient_card_id.substring(0, 15)}}…
                    </Poptip>
                </span>
                            <span v-else>无</span>
                        </template>
                    </Table>
                    <div class="ivu-mt ivu-text-center">
                        <Page
                                :total="page.total"
                                :current.sync="page.page"
                                show-total
                                show-elevator
                                :page-size="page.pageSize"
                                @on-change="handleChangePage"
                                :page-size-opts="pageOpts"
                                show-sizer transfer
                                @on-page-size-change="handleChangePageSize"
                        />
                    </div>
                    <Modal v-model="createModal1" :mask-closable= "false" title="分配患者" @on-ok="handleSubmitS" :loading="creating">
                        <Form :model="createData" >
                            <FormItem label="归属人"  >
                                <Select v-model="createData.belong_member_id"  multiple filterable @on-change="choose">
                                    <Option
                                            v-for="item in member_medical_list"
                                            :value="item.id"
                                            :key="item.id"
                                    >{{ item.name }}</Option>
                                </Select>
                            </FormItem>
                        </Form>
                    </Modal>
                </TabPane>
        </Tabs>
        <Drawer :closable="false" v-model="showTetailDrawer" width="1000" class="edtailDrawers"   >
            <detailDrawer :editType="+value===1?1:2" v-if="patientId" :patientId="patientId"></detailDrawer>
        </Drawer>
    </div>
</template>
<script>
    import detailDrawer from '../patient-detail/index.vue'

    import { PublicSeaList, PublicFromMember, PublicDistribution, batchList, BatchPatient } from '@api/patient';
    // import { mapActions } from 'vuex';
    export default {
        components: { detailDrawer },
        data () {
            return {
                patientId: null,
                showTetailDrawer: false,
                value: '1',
                SHow: true,
                isShow: true,
                isShows: true,
                type: 0,
                member_customer_list: [],
                member_medical_list: [],
                dataTime: [],
                loading: false,
                keywords: '',
                dataIndexId: -1,
                source_channel_id: '',
                outpatient_type_id: '',
                clinic_id: '',
                sort_created_type: 0,
                sort_revisiting_type: 0,
                sort_callback_type: 0,
                sort_missed_type: 0,
                sort_updated_type: 0,
                page: {
                    page: 1,
                    pageSize: 10,
                    total: 0
                },
                pageOpts: [10, 20, 30, 50, 200, 500],
                modal: false,
                memberlist: [],
                basicData: {
                    source_channel_list: [],
                    outpatient_type_list: [],
                    clinic_list: []
                },
                is_show: false,
                creating: true,
                createModal: false,
                createModal1: false,
                createData: {
                    belong_member_id: []
                },
                patient_diseases_id: '',
                createRules: {
                    belong_member_id: [{ required: true, message: '请选择归属人', trigger: 'change' }]
                },
                columns: [
                    {
                        type: 'selection',
                        width: 35,
                        fixed: 'left'
                    },
                    {
                        title: '基本信息',
                        minWidth: 130,
                        slot: 'info',
                        fixed: 'left'
                    },
                    {
                        title: '诊疗号',
                        key: 'patient_card_id',
                        slot: 'patient_card_id',
                        minWidth: 130
                    },
                    {
                        title: '诊室',
                        key: 'clinic_name',
                        minWidth: 80
                    },
                    {
                        title: '到诊时间',
                        key: 'created_at_str',
                        sortable: true,
                        minWidth: 150
                    },
                    {
                        title: '微信号',
                        key: 'wx_name',
                        minWidth: 100
                    },

                    {
                        title: '就诊类型',
                        slot: 'diagnosis',
                        minWidth: 100
                    },

                    {
                        title: '复诊次数',
                        key: 'revisiting_count',
                        // sortable: true,
                        sortable: 'custom',
                        minWidth: 110
                    },
                    {
                        title: '回访次数',
                        key: 'callback_count',
                        // sortable: true,
                        sortable: 'custom',
                        minWidth: 110
                    },
                    {
                        title: '未到诊天数',
                        key: 'missed_days',
                        // sortable: true,
                        sortable: 'custom',
                        minWidth: 120
                    },

                    {
                        title: '地区',
                        key: 'city_name',
                        minWidth: 100
                    },
                    {
                        title: '病种',
                        key: 'diseases_name',
                        minWidth: 80
                    },
                    {
                        title: '来源',
                        minWidth: 120,
                        slot: 'channel'
                    },
                    {
                        title: '更新时间',
                        key: 'updated_at_str',
                        sortable: true,
                        minWidth: 110
                    }
                ],
                data: [],
                selection: [],
                starts: [],
                belong_member_id: [],
                patient_diseases_list: [],
                disabled: true
            }
        },
        created () {
            // this.$refs.tabs.style.display = 'none';
            let is_role_yz = localStorage.getItem('is_role_yz')
            let is_role_kf = localStorage.getItem('is_role_kf')
            if (is_role_kf === '1' && is_role_yz === '1') {
                this.isShow = true
                this.isShows = true
            } else if (is_role_kf === '1' && is_role_yz === '0') {
                this.isShow = true
                this.type = 0
                this.isShows = false
            } else if (is_role_kf === '0' && is_role_yz === '1') {
                this.value = '2'
                this.isShow = false
                this.isShows = true
                this.type = 1
            } else if (is_role_kf === '0' && is_role_yz === '0') {
                this.SHow = false
            }
        },
        mounted () {
            batchList().then(res => {
                this.member_customer_list = res.condition.member_customer_list
                this.member_medical_list = res.condition.member_medical_list
            })
        },
        methods: {
            closeDrawer () {
                this.getData()
            },
            choose (e) {
                this.belong_member_id = e
            },
            selectionChange (e) {
                this.selection = e
                if (this.selection.length === 0) {
                    this.disabled = true
                } else {
                    this.disabled = false
                }
                this.starts = []
                for (let i = 0; i < this.selection.length; i++) {
                    this.starts.push(this.selection[i].id)
                }
            },
            sumber () {
                this.createModal = true
            },
            sumbers () {
                this.createModal1 = true
            },
            swichta (e) {
                this.patient_diseases_id = ''
                this.keywords = ''
                this.source_channel_id = ''
                this.clinic_id = ''
                this.outpatient_type_id = ''
                this.dataTime = ''
                this.disabled = true
                if (e === '1') {
                    this.type = 0
                    this.getData()
                } else {
                    this.type = 1
                    this.getData()
                }
            },
            // ...mapActions('admin/page', ['setPatientDetail']),
            // 获取表格数据
            getData () {
                this.loading = true
                PublicSeaList({
                    type: this.type,
                    start_time: this.dataTime[0] ? this.dataTime[0] : '',
                    end_time: this.dataTime[1] ? this.dataTime[1] : '',
                    keywords: this.keywords,
                    clinic_id: this.clinic_id,
                    source_channel_id: this.source_channel_id,
                    outpatient_type_id: this.outpatient_type_id,
                    sort_created_type: this.sort_created_type,
                    sort_revisiting_type: this.sort_revisiting_type,
                    sort_callback_type: this.sort_callback_type,
                    sort_missed_type: this.sort_missed_type,
                    sort_updated_type: this.sort_updated_type,
                    patient_diseases_id: this.patient_diseases_id,
                    page: this.page.page,
                    pageSize: this.page.pageSize
                }).then(res => {
                    this.data = res.list
                    this.page.total = res.total
                    this.basicData.outpatient_type_list = JSON.parse(JSON.stringify(res.condition.outpatient_type_list))
                    this.basicData.source_channel_list = res.condition.source_channel_list
                    this.basicData.clinic_list = res.condition.clinic_list || []
                    if (this.patient_diseases_list.length === 0) {
                        this.patient_diseases_list = res.condition.patient_diseases_list
                    }
                }).finally(() => {
                    this.loading = false
                })
            },
            handleChangeClinic (e) {
                this.clinic_id = e
                this.page.page = 1
                this.getData()
            },
            // 切换分页
            handleChangePage (e) {
                this.page.page = e
                this.getData()
            },
            handleDetailPatient (row) {
                this.patientId = row.id
                this.showTetailDrawer = true
                // this.$store.commit('admin/page/setPatientDetail', { patientId: row.id, edit_type: '' })
                // this.$router.push('/patient/detail')
            },
            // 切换每页的数据
            handleChangePageSize (e) {
                this.page.pageSize = e
                this.page.page = 1
                this.getData()
            },
            handleChangeWord (e) {
                this.page.page = 1
                this.dataTime = []
                this.source_channel_id = ''
                this.outpatient_type_id = ''
                this.clinic_id = ''
                this.getData()
            },
            // 切换渠道
            handleChangeSource (e) {
                this.source_channel_id = e
                this.page.page = 1
                this.getData()
            },
            // 切换就诊类型
            handleChangeOutPatient (e) {
                this.outpatient_type_id = e
                this.page.page = 1
                this.getData()
            },
            handleChangeOutPatients (e) {
                this.patient_diseases_id = e
                this.page.page = 1
                this.getData()
            },
            // 打开分配
            handleAllocation (id) {
                this.dataIndexId = id
                this.$refs['create'].resetFields()
                this.createModal = true;
            },
            handleChangeData (e) {
                this.keywords = ''
                this.dataTime = e
                this.page.page = 1
                this.getData()
            },
            // 排序触发
            handleChangeSort (column) {
                switch (column.key) {
                case 'created_at_str':
                    column.order === 'asc' ? this.sort_created_type = 1 : this.sort_created_type = 2
                    this.sort_revisiting_type = 0
                    this.sort_callback_type = 0
                    this.sort_missed_type = 0
                    this.sort_updated_type = 0
                    break;
                case 'revisiting_count':
                    column.order === 'asc' ? this.sort_revisiting_type = 1 : this.sort_revisiting_type = 2
                    this.sort_created_type = 0
                    this.sort_callback_type = 0
                    this.sort_missed_type = 0
                    this.sort_updated_type = 0
                    break;
                case 'callback_count':
                    column.order === 'asc' ? this.sort_callback_type = 1 : this.sort_callback_type = 2
                    this.sort_created_type = 0
                    this.sort_revisiting_type = 0
                    this.sort_missed_type = 0
                    this.sort_updated_type = 0
                    break;
                case 'missed_days':
                    column.order === 'asc' ? this.sort_missed_type = 1 : this.sort_missed_type = 2
                    this.sort_created_type = 0
                    this.sort_revisiting_type = 0
                    this.sort_callback_type = 0
                    this.sort_updated_type = 0
                    break;
                case 'updated_at_str':
                    column.order === 'asc' ? this.sort_updated_type = 1 : this.sort_updated_type = 2
                    this.sort_created_type = 0
                    this.sort_revisiting_type = 0
                    this.sort_callback_type = 0
                    this.sort_missed_type = 0
                    break;
                }
                this.getData()
            },
            // 提交分配
            handleSubmit () {
                BatchPatient({
                    ids: this.starts.join(','),
                    belong_member_ids: this.belong_member_id.join(','),
                    check_type: 1
                }).then(() => {
                    this.$Message.success('分配成功')
                    // this.createData.belong_member_id = ''
                    this.createModal = false
                    this.getData()
                    this.disabled = true
                })
            },
            handleSubmitS () {
                BatchPatient({
                    ids: this.starts.join(','),
                    belong_member_ids: this.belong_member_id.join(','),
                    check_type: 2
                }).then(() => {
                    this.getData()
                    this.$Message.success('分配成功')
                    // this.createData.belong_member_id = ''
                    this.createModal1 = false
                    this.disabled = true
                })
            }
        }
    }
</script>
<style scoped lang="less">
  .blueStatus {
    line-height: 20px;
    background: #e6fffb;
    border-color: #87e8de;
    font-size: 12px;
    color: #13c2c2!important;
  }
  .i-table-no-border{
      height: 100% !important;
  }
    /deep/.ivu-table{
        min-height: 200px;
    }

</style>
